<template>
    <div contenteditable="true" @paste="handleAreapaste" class="main">

    </div>
    <img :src="src_" alt="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <filec></filec>
</template>

<script lang="ts" setup>
import filec from './file.vue';
import { ref } from 'vue';
let src_ = ref();
function getBase64Image(_imgfile,callback) {
    const reader = new FileReader();
    reader.onload = function (evt:any) {
        if (typeof callback === 'function') {
            callback(evt.target.result)
        } else {
            console.log("我是base64:", evt.target.result);
        }
    };
    reader.readAsDataURL(_imgfile);
}
const handleAreapaste = (e) => {
    let imgfile = e.clipboardData.items[0].getAsFile();
    getBase64Image(imgfile,(f)=>{
        src_.value = f;
    });
}
</script>

<style lang="less" scoped>
.main {
    display: inline-block;
    min-width: 600px;
    min-height: 400px;
    max-height: 800px;
    overflow: auto;
    box-shadow: 0px 0px 5px #333;
    border-radius: 4px;
    padding: 20px;
}
</style>